.FrontHeader {
  height: 60px;
  line-height: 60px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;

  .divLeft {
    flex: 1;
  }

  .divCenter {
    flex: 3;
    display: flex;
    justify-content: space-around;
    font-size: 0.7rem;
    font-weight: 400;
    color: #FFFFFF;

    > div {
      width: 5rem;
      text-align: center;
    }

    > div:hover {
      border-bottom: 5px solid #FFFFFF;
    }
  }

  .divRight {
    flex: 2;
    display: flex;
    justify-content: right;
    padding-right: 2rem;
    color: #e8e8e8;
    font-size: 0.8rem;

    > div:hover {
      cursor: pointer;
    }

    > div:active {
      color: #666666;
    }
  }

}

.currentPageKeyCss{
  border-bottom: 5px solid #FFFFFF;
}



@media screen and (max-width: 1000px) {
  .FrontHeaderBody {

    .divLeft {
      flex: 1;
      background-color: blueviolet;
    }

    .divCenter {
      flex: 3;
      background-color: aqua;
    }

    .divRight {
      flex: none;
      background-color: brown;
    }
  }

}
